<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

</head>

<body >
<div class="container">

<!--标题部分-->
      <div>

       <h1>系统公告客户端设计 BootStrap+JQuery</h1>




      <!--内容部分-->
      <div id="noticeListContainer">
    <h3>内容列表区：</h3>

<!--          <div style="padding: 100px 100px ;">-->
<!--              <form class="bs-example bs-example-form" role="form">-->
<!--                  <div class="row">-->
<!--                      <div class="col-lg-6">-->
<!--                          <div class="input-group">-->
<!--&lt;!&ndash;                    <span class="input-group-addon">&ndash;&gt;-->
<!--&lt;!&ndash;                        <input type="checkbox"></span>&ndash;&gt;-->

<!--                              <input type="text" class="form-control" name="title"  placeholder="请输入标题">-->
<!--                              <input type="button" class="form-control" value="dd" onclick="doQueryNotices()">-->
<!--                          </div>&lt;!&ndash; /input-group &ndash;&gt;-->
<!--                      </div>&lt;!&ndash; /.col-lg-6 &ndash;&gt;-->
<!--                  </div>-->
<!--              </form>-->
<!--          </div>-->

          <form id="queryform" >
              <input type="text"  name="title"  placeholder="请输入标题">
              <input type="button" value="查询" onclick="doQueryNotices()">
              <input type="button" value="新增" onclick="doDisplay(true,false)">
          </form>




          <table class="table">
              <thead>
              <tr>
                  <th>序号</th>
                  <th>标题</th>
                  <th>类型</th>
                  <th>状态</th>
                  <th>创建时间</th>
                  <th>操作</th>
              </tr>
              </thead>

              <tbody>
              <tr>
                  <td colspan="6">
                      数据加载中loading.....
                  </td>
              </tr>

              </tbody>

          </table>


          <!--分页页面-->
          <div class="pagination">
              <button class="pre">上一页</button>
              <button class="percent">1/1</button>
              <button class="next">下一页</button>
              <form style="display: inline">
                  <input type="text" name="pageCurrent">
                  <input type="button" value="跳转" class="jump">

              </form>
          </div>

      </div>


          <h3>代码编辑区：</h3>
      <!--代码内容编辑区-->
      <div id="noticeEditContainer" style="display: block">
          <form class="form-horizontal" role="form" id="noticeEditform">


          <div class="form-group"id="typeId">
              <label for="typeId" class="col-sm-2 control-label">类型</label>
              <label class="radio-inline" >
                  <input type="radio"  name="typeId" value="1" checked> 通知
              </label>
              <label class="radio-inline" >
                  <input type="radio" name="typeId"  value="2"> 公告
              </label>
          </div>



          <div class="form-group">
              <label for="titleId" class="col-sm-2 control-label">标题</label>
              <div class="col-sm-10">
                  <input type="text" class="form-control" id="titleId" placeholder="请输入标题">
              </div>
          </div>



              <div class="form-group">
                  <label for="contentId" class="col-sm-2 control-label">内容</label>
                  <div class="col-sm-10">
                      <input type="text" class="form-control"  id="contentId"
                             placeholder="请输入内容...">

                  </div>
              </div>


              <div class="form-group">
                  <label for="status" class="col-sm-2 control-label">状态</label>
                  <label class="radio-inline" id="status">
                      <input type="radio" name="status" value="0" checked> 启用
                  </label>
                  <label class="radio-inline">
                      <input type="radio" name="status"  value="1"> 禁用
                  </label>
              </div>


          <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                  <button type="submit" class="btn btn-default" onclick="doSaveOrUpdate()">保存</button>
                  <button type="cancel" class="btn btn-default" onclick="doNotSaveNotice()">取消</button>
              </div>
          </div>
          </form>



      </div>
      </div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>


<script>
    //jquery
      $(function (){//页面加载完成执行
         // debugger
          doGetNotice();

          //分页事件注册及处理
          //在类选选择器为pagination的容器对象注册clik事件
          //点击容器的对应元素时，执行doJumpToPage方法
        $(".pagination").on("click",".pre,.next,.jump",doJumpToPage);
      });


//初始化表单数据
    function doInitEditForm(result){

        $("#id").val(result.data.id);
        $(`#noticeEditForm
select>option[value=${result.data.type}]`).prop("selected",true)
        $("#titleId").val(result.data.title);
        $("#contentId").val(result.data.content);
        $(`#noticeEditForm
input[value=${result.data.status}]:radio`).prop("checked",true)


    }



   function doFindById(id){
       //1.基于id查找通告信息
       let url=`http://localhost/notice/${id}`;
       $.ajax({
           url:url,

           success(result){
               if(result.state==1){

                   doInitEditForm(result);



               }else {
                   alert("可能没有对应的记录")
               }
           }
       })

   }
    //2.基于找到的内容初始化表单
      //添加或更新公告信息
    function doSaveOrUpdate(id){

        if (id){//js中数值型
            doInitEditForm(id);
        }

        //1.获取请求参数
        //2.定义请求url
        //3.发生异步请求
//1.
        let params={
            id:$("#id"),
            type:$("#typeId").val(),
            title:$("#titleId").val(),
            content:$("#contentId").val(),
            status:$("#noticeEditform input:radio:checked").val(),
        }
//2.
         let url="http://localhost/notice/";
//3.
        $.ajax({
            method:params.id?"put":"post",
            url:url,
            data: JSON.stringify(params),  //将js对象转为json字符串
            contentType:"application/json", //向服务端传递数据类型
            success(result){
                if (result.status==1){
                    alert(result.message);
                    doGetNotice();
                    doResetForm(); //重置表单
                }else {
                    alert(result.message);
                }
            }
        })
    }

//重置表单
    function doResetForm(){

        $("#id").val("");
        $(`#noticeEditForm
select>option[value=1]`).prop("selected",true)
        $("#titleId").val("");
        $("#contentId").val("");
        $(`#noticeEditForm
input[value=0]:radio`).prop("checked",true)

    }


      //表单条件查询方法
      function doQueryNotices(){
         //1.初始化当前页页码
          localStorage.setItem("pageCurrent",1)
         //2.基于条件查询
          doGetNotice();

      }




      //基于分页按钮点击事件，进行分页查询
    function doJumpToPage(){
        //1.获取点击对象class的属性值
        let cls=$(this).prop("class");
        //2.获取被点击对象的页码属性
            //2.1获取总页数和当前页码值
        let pageCurrent=localStorage.getItem("pageCurrent");  //当前页码值
        let pageCount=localStorage.getItem("pageCount");    //总页数
            //2.2修改当前页码值
        if(cls=="pre"&&pageCurrent>1){
            pageCurrent--;
        }else if (cls=="next"&&pageCurrent<pageCount){
            pageCurrent++;
        }else if (cls=="jump"){
            //获取form表单中元素为input，名字为pageCurrent的值
            let pageC=parseInt($("form input[name=pageCurrent]").val());//转为int整数

            if(pageC<1||pageC>pageCount){
             alert("页码值不符");
             return;}
            pageCurrent=pageC;
            $("form input[name=pageCurrent]").val(""); //跳转后清空
        }else {
            //假如已经是第一页了，你还点上一页，则什么也不做
            //假如已经是最后一页了，你还点下一页，则什么不做
            return;

        }
    //  console.log("pageCurrent",pageCurrent)

           window.localStorage.setItem("pageCurrent",pageCurrent);
            //把数据暂存在windows窗口
        //3.基于新的页码属性重新执行查询方法
        doGetNotice();
    }



function doGetNotice() {

    let pageCurrent = localStorage.getItem("pageCurrent");
    let params = {pageCurrent: pageCurrent};
    let url = "http://localhost/notice/";


    let title = $("#queryform input[name='title']").val();
    params.title = title;

    //1.基于jquery中的ajax函数向服务端发起异步请求
    //$代表jQuery对象
    $.ajax({
        url: url,
        data: params,
        //2.服务端没有抛出异常（成功后）到客户端时执行函数
        success(result) {
            //console.log(result);//服务端控制台测试参数
            doHandleQueryResponseResult(result)
        },

    //      error(){
    //         alert("999")
    //      }
     })
}

    //3.处理查询时的响应结果(思路)
    function  doHandleQueryResponseResult(result){
if(result.state==1){ //成功时的处理
    doHandleQueryOk(result);

}else {
   doHandleQueryError();//错误时处理，后端返回state！==1
}
    }

    //错误时处理
    function doHandleQueryError(){
        //1.更新tbody内容
        let tBody=$("table>tbody");
        let len=$("table>thead>tr>th").length;
        let tr=`<tr><td colspan="${len}">没有找到对应记录</td></tr>`
        tBody.html(tr);
        //================
        //2.刷新页码值
        $(".percent").html("0/0");


    }




   //4.处理正确的条件查询结果
     function doHandleQueryOk(result){
          //设置tbody的信息
         let records=result.data.list;
          doSetTableBodyRows(records);



         //设置分页信息
         if(records.length>0);
          doSetPagintation(result);

     }


     //设置分页信息方法
     function  doSetPagintation(result) {
         $(".percent").html(result.data.pageNum+"/"+result.data.pages)
//将当前页码值存储到浏览器的localStorage对象中，便于其他方法后续应用
         localStorage.setItem("pageCurrent",result.data.pageNum);
         localStorage.setItem("pageCount",result.data.pages);
     }


   //5.设置tbody中的公告信息方法
    function  doSetTableBodyRows(records){
          //5.1获取tbbody对象并清空原有内容（数据加载中loading.....）
        let tBody=$("tbody");//作用域获取对象
        tBody.empty();//清空tbody内容

        //5.2迭代records中的内容，并追加到tbody中
            console.log("records",records);//测数据
        //forEach为js中的原生函数，item为数组中的一个元素，i为元素下标
        records.forEach((item,i)=>{tBody.append(doCreateRow(item,i))})



        if(records.length==0){

            let column=$("table>thead>tr>th");

            let tr=`<tr><td colspan="{column}">没有找到对应的记录</td></tr>`
            tBody.append(tr)
            return;
        }

        // records.forEach(function (item,i) {
        //     let tr=doCreateRow(item,i)
        //     tBody.append(tr);
        // })
    };


      function doCreateRow(item,i){
          return `id
          <tr>  //tr定义行
              <td>${i+1}</td>
              <td>${item.title}</td>
              <td>${item.type=='1'?"通知":"公告"}</td>
              <td>${item.status=='0'?"正常":"关闭"}</td>
              <td>${item.createdTime}</td>
               <td><button onclick="doDeleteById(${item.id})">delete</button></td>
               <td><button onclick="doFindById(${item.id})">update</button></td>
          </tr>
          `
      }

      function doDeleteById(id){
          //1.定义请求参数
          let params={id:id}
          //2.定义请求url
          let url=`http://localhost/notice/${id}`;
          //3.发生异步请求
          $.ajax({
              method:"delete",
              url:url,
              success(result) {
                  if(result.state==1){

                      dohandleDeleteOk(result.message);

                      alert(result.message);

                      doGetNotice();// 刷新页面数据
                  }else {
                      //dohandleDeleteError();
                      alert(result.message);
                  }
              }
          })
      }



      function dohandleDeleteOk(msg){
          //1.给出提示信息
          alert(msg);
          //2.设置当前页码值（根据行数判断，查询上一页记录）
          let rows=$("table>tbody>tr").length;
          let pageCurrent=parseInt(localStorage.getItem("pageCurrent"));
          let pageCount=parseInt(localStorage.getItem("pageCount"));
          if(pageCurrent>1 && pageCurrent==pageCount && rows==1){
              pageCurrent--;
              localStorage.setItem("pageCurrent",pageCurrent);
          }

          //3.刷新
          doGetNotice();


    }



    function doDisplay(){
          //让编辑区显示
          $("#noticeEditContainer").css("display","block");
        //让列表区隐藏
        $("#noticeListContainer").css("display","none");

    }


</script>




</body>



</html>